import React, {PureComponent} from 'react'
import Line from '../chart/base-line'
import {setTitle, scale} from '../../component/chart/util/common'
import echarts from 'echarts';
import {connect} from 'react-redux'

class ProductLow extends PureComponent {
    shouldComponentUpdate(nextProps) {
        return nextProps.productLow !== this.props.productLow
    }

    renderDate = (data) => {
        const productLow = data.toJS()
        return {
            title: '每日库存底线满足率',
            xAxisData: productLow.length && Object.keys(productLow[0].rates),
            option: {
                yAxis: {
                    min: 70,
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                title: {
                    textStyle: {
                        color: '#5BE2EF',
                        fontSize: 14 * scale,
                        fontWeight: 'bolder'
                    }
                }
            },
            yAxisData: productLow.map(product => {
                return {
                    name: product.name,
                    data: Object.keys(product.rates).map(key => product.rates[key])
                }
            })
        }
    }

    render() {
        const {productLow} = this.props
        const data = this.renderDate(productLow)
        return (
            <Line config={data}/>
        )
    }

}


function mapStoreToProps({productLow}) {

    return {productLow}
}

export default connect(mapStoreToProps)(ProductLow)